<template>
  <div class="moreinfo">
    <div class="banner">
      <img src="../static/banner2.jpg" alt="" width="100%" />
    </div>
    <div class="catch">
      <div></div>
      <div>
        <div class="title">
          <span>找保姆</span>
          <p class="sp">
            请做家务，辅助/全职带孩子，照顾老人，烧饭保洁阿姨，哪个公司好且价格低？上海保姆公司排名推荐好品牌
          </p>
        </div>
        <div class="seach">
          <ul class="content">
            <li>
              <span class="lab">区域：</span>
              <span class="all all1" @click="choose">不限</span>
              <span class="ear re">
                <el-cascader
                  size="large"
                  :options="options"
                  v-model="selectedOptions"
                  @change="handleChange"
                ></el-cascader>
              </span>
            </li>
            <li v-for="(item, index) in data1" :key="index">
              <span class="lab">{{ item.lab }}</span>
              <span class="all">全部</span>
              <span class="ear">
                <span v-for="(ite, ind) in item.sub" :key="ind" class="subspan">
                  <input
                    type="radio"
                    :name="index"
                    :value="ite.fo"
                    :id="'item' + index + ind"
                    :v-model="'checkedValue'+index"
                    @change="getValue(ite.fo)"
                  />
                  <label :for="'item' + index + ind"></label>
                  {{ ite.fo }}
                </span>
              </span>
            </li>
          </ul>
        </div>
        <div class="display">
          <span v-for="(item, index) in dataA" :key="index" class="what" @click="close(item)">
            <div class="fa">
              <img  :src="'http://housekeepi.com/'+item.icon" :title="item.nick_name+'阿姨'"/>
              <span class="son">{{item.work_type}}{{item.nick_name}}阿姨</span>
            </div>
            <div class="ufo">
              <p>{{item.content[0].age}}岁|{{item.province}}|{{item.area}}</p>
              <p>价格：{{item.h_price}}</p>
              <p>职称：高级{{ item.work_type}}</p>
            </div>
          </span>
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
import { regionData, CodeToText } from "element-china-area-data"
export default {
  data() {
    return {
      da:JSON.stringify([{age:18}]),
      fom: {
        page: "1",
        size: "10",
        province: "",
        city: "",
        area: "",
        h_price: "",
        age: "",
      },
      checkedValue0: "",
      checkedValue1: "",
      options: regionData,
      selectedOptions: [],
      data1: [
        {
          lab: "价格：",
          sub: [
            {
              fo: "40元-60元",
            },
            {
              fo: "60元-80元",
            },
            {
              fo: "80元-100元",
            },
            {
              fo: "100元-150元",
            },
          ],
        },
        {
          lab: "年龄：",
          sub: [
            {
              fo: "30岁-35岁",
            },
            {
              fo: "36岁-40岁",
            },
            {
              fo: "41岁-45岁",
            },
            {
              fo: "51岁-55岁",
            },
          ],
        },
      ],
      dataA:[],
    };
  },
  computed:{
    ...mapState(['try']),
  },
  watch: {
    fom:{
      handler:function(val){
        console.log(val);
        this.aj(val)
      },
        deep:true
    }
  },
  methods: {
    ...mapMutations(['SEACH','SLEEP']),
    aj(val) {
      this.dataA=[]
      this.myaxios({
        url: 'http://housekeepi.com/api/workUserList',
        method: "post",
        data: val,
      })
        .then((e) => {
          console.log(e.data.data.data);
          this.dataA=this.modi(e.data.data.data)
          console.log(this.dataA);
        })
        .catch(() => {
          console.log("error");
        });
    },
    modi(arr){
      let cache=[]
      if(arr.length!=0){
        arr.map((item)=>{
          if(item.content.substr(0,1)=='['){
          if(item.work_type==1){
            item.work_type='月嫂'
          }else if(item.work_type==2){
            item.work_type='保洁'
          }else if(item.work_type==3){
            item.work_type='家政'
          }
            item.content=JSON.parse(item.content)
            cache.push(item)
          }
        })
        return cache
      }else{
        return
      }
    },
    choose() {
      this.selectedOptions = [];
    },
    handleChange(value) {
      this.fom.province = CodeToText[value[0]];
      this.fom.city = CodeToText[value[1]];
      this.fom.area = CodeToText[value[2]];
    },
    getValue(val){
      if (val.indexOf("元") !== -1) {
          let cache=val.replace(/[^0-9]/ig,' ').split(' ')
          let arr=[]
          arr[0]=cache[0]
          arr[1]=cache[2]
        this.fom.h_price = arr;
      }else if (val.indexOf("岁") !== -1) {
        let cache=val.replace(/[^0-9]/ig,' ').split(' ')
        let arr=[]
        arr[0]=cache[0]
        arr[1]=cache[2]
        this.fom.age = arr;
      }
    },
    close(val){
      this.SLEEP(val)
      // 判断是否登录
        this.$router.push({path:'/person'})
    }
  },
  // 510525198704262014
  mounted(){
    // 检测当前点击的时哪个按钮
    let opt={
      page:'1',
        size:'10',
        work_type:'',
      // 调用封装的axiuos
    }
      let str=window.location.href
      if(str.indexOf('yuesao')!=-1){
        opt.work_type='1'
      }else if(str.indexOf('baojie')!=-1){
         opt.work_type='2'
      }else if(str.indexOf('jiazhen')!=-1){
        opt.work_type='3'
      }
    this.aj(opt)
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  color: #000;
  box-sizing: border-box;
}
.re {
  padding-left: 15px;
}
.all1 {
  cursor: pointer;
}
.catch {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 10% 80% 10%;
}
.sp {
  white-space: nowrap;
}
.title {
  display: grid;
  grid-template-columns: 15% 85%;
  grid-gap: 20px;
  border-bottom: 3px solid #ff6780;
  margin-bottom: 10px;
}
.title span {
  padding: 10px;
  color: #fff;
  display: grid;
  justify-content: center;
  align-items: center;
  background: #ff6780;
  position: relative;
  font-size: 1.4rem;
}
.title span::before {
  content: "";
  width: 5px;
  height: 25px;
  background: #fff;
  position: absolute;
  left: 15%;
}
.title p {
  display: grid;
  align-items: flex-end;
}
.seach .content {
  display: grid;
  grid-gap: 10px;
}
.seach .content li {
  display: grid;
  grid-template-columns: 8% 5% 87%;
  align-items: center;
}
.seach .content .lab {
  display: inline-block;
  padding: 10px 24px;
  background: #e4e4e4;
  color: #ff6780;
  font-weight: 700;
  text-align: center;
}
.all {
  justify-self: center;
}
.ear span {
  padding: 10px;
  display: inline-block;
  margin-right: 5px;
}
.ear span:hover {
  background: rgb(255, 103, 128);
}
input:checked + label {
  background: rgba(255, 103, 128, 0.5);
}
.subspan {
  cursor: pointer;
  position: relative;
}
input[type="radio"] {
  appearance: none;
}
label {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  top: 0;
  left: 0;
}
/* .text{
        z-index: 100;
    } */

.display {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 15px;
}
.what {
  display: inline;
}
.what p {
  width: 350px;
}
.fa {
  display: inline-block;
  position: relative;
}
.fa img{
  width: 100%;
  /* height: 275px; */
}
.son {
  width: 100%;
  padding: 5px 0;
  background: #ff67808f;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
}
.ufo {
  padding-left: 10px;
  display: grid;
  grid-gap: 5px;
}
</style>